<template>
	<view class="index-section">
		<tit tit="读好书" />
		<view class="clickableInfo">
			<clickBtn :tabList="tabList" @cur="cur"/>
		</view>
		<scroll-view  @scrolltolower="scroll" scroll-x>
			<view class="main">
				<view class="item" v-for="(item,index) in list" :key="index"  @tap.stop="handleDetail(item.id)">
					<view class="books">
						<image :src="$imageOss(item.image)" mode="aspectFill" style="" class="image"></image>
						<view class="bot">
							<text class="bot1">{{item.title}}</text>
							<text class="bot2">{{item.author}}</text>
						</view>
					</view>
				</view>
				<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 10rpx;">{{isText}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import tit from '@/pages/index/cpns/title.vue';
	import clickBtn from '@/pages/index/cpns/clickBtn.vue';
	import { bookCategory,bookHome } from "@/request/homeApi.js"
	
	export default {
		components: {
			tit,
			clickBtn,
			
		},
		data() {
			return {
				tabList: [],
				list:[],
				category_id:1,
				isText:'',
				last_page:1,
				page:1
			};
		},
		mounted() {
			this.getCategory()
			this.getList()
		},
		methods:{
			scroll(e){
				let that = this
				if (that.page < that.last_page) {
					that.page = that.page + 1
					that.getList()
				}
			},
			cur(e){
				this.category_id = e
				this.list=[]
				this.getList()
			},
			getCategory(){
				let that = this
				bookCategory({
					pid:0
				}).then(res => {
					that.tabList = res.data
				})
			},
			handleDetail(id) {
				// uni.navigateTo({
				// 	url: `/pages/home/startReading?id=${id}`,
				// });
			},
			getList(){
				let that = this
				bookHome({
					category_id: that.category_id,
					page:that.page,
					limit:6,
					title:'',
					type:'',
					recommend:2,
				}).then(res => {
					that.list = that.list.concat(res.data.list)
					that.last_page = Math.ceil(res.data.count / res.data.list.length)
					res.data.count == 0 ? that.isText = '暂无书籍' : that.isText = ''
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.index-section {
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		.clickableInfo{
			margin: 20rpx 0;
		}
		.main{
			display: flex;
			flex-direction: row;
			.item{
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				.books{
					margin-right:20rpx;
					display: flex;
					// align-items: center;
					flex-direction: column;
					.image{
						border-radius: 8rpx;
						width: 150rpx;
						height: 180rpx;
					}
					.bot{
						    display: flex;
						    flex-direction: column;
						    justify-content: center;
						    // align-items: center;
						.bot1{
							color: #313131;
							font-family: PingFang SC;
							font-size: 28rpx;
							font-style: normal;
							font-weight: 500;
							line-height: normal;
							margin: 10rpx 0;
						}
						.bot2{
							color: #909090;
							font-family: PingFang SC;
							font-size: 22rpx;
							font-style: normal;
							font-weight: 400;
							line-height: normal;
						};
					}
				}
			}
		}

	}
</style>